<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-06-08 07:51:53
 * @LastEditTime : 2020-02-05 21:02:58
 * @LastEditors  : Please set LastEditors
 -->
<template>
  <view class="home-page">
    <!-- banner背景图 -->
    <view class="banner">
      <!-- 轮播图片 -->
      <view class="swiper">
        <Swiper :banners="imgUrls" vertical="false" />
      </view>
      <view class="banner-bg"></view>
    </view>
    <!-- 服务和产品列表 -->
    <view class="product-box">
      <view class="product-list">
        <view
          class="item"
          v-for="(item, index) in moduleList"
          :key="index"
          :data-id="item.id"
          :data-url="item.url"
          :data-type="item.typeClick"
          @click="switchTabUrl"
        >
          <view class="icon">
            <image :src="item.img" mode="scaleToFill" lazy-load="false">
            </image>
          </view>
          <view class="text">{{ item.moduleText }}</view>
          <image
            class="tips1"
            v-if="item.id == 1"
            src="../static/images/icon-home-tips1.png"
            mode="scaleToFill"
            lazy-load="false"
          >
          </image>
          <image
            class="tips2"
            v-if="item.id == 10"
            src="../static/images/icon-home-tips2.png"
            mode="scaleToFill"
            lazy-load="false"
          >
          </image>
        </view>
      </view>
    </view>
    <!-- 产品中心和知识库 -->
    <view class="content-module">
      <!-- 平台头条 -->
      <view class="title">
        <view class="title-wiper">
          <view class="label">
            <text class="text">平台</text>
            <text class="text text-color">头条:</text>
          </view>
          <!-- 平台头条轮播图 -->
          <view class="vertical-swiper">
            <VerticalSwiper :arrText="arrText" />
          </view>
        </view>
      </view>
      <!-- 产品中心 -->
      <view class="product-center">
        <view class="top">
          <view class="top-title">
            <view class="label"></view>
            <view class="text">产品中心</view>
          </view>
          <view
            class="more"
            data-id="1"
            data-url="productCenter"
            @click="switchTabUrl"
            >查看更多</view
          >
        </view>
        <view class="tab-content-product">
          <Product :productList="productList" />
        </view>
      </view>
      <!-- 资讯中心 -->
      <view class="tab-content-know">
        <view class="top">
          <view class="top-title">
            <view class="label"></view>
            <view class="text">资讯中心</view>
          </view>
        </view>
        <view class="knowledge-intro">
          <view
            class="know-item"
            v-for="(item, index) in knowledge"
            :key="index"
            :data-id="item.id"
            :data-url="'knowledgeDetails'"
            @click="navigateUrl"
          >
            <view>
              <view class="tips-text">{{ item.title }}</view>
              <view class="tips-title">{{ item.typeName }}</view>
              <view class="tips-time">
                <view class="date">{{ item.creationTime }}</view>
                <view class="num">
                  <view class="icon">
                    <image
                      src="../static/images/icon-look.png"
                      mode="scaleToFill"
                      lazy-load="false"
                    >
                    </image>
                  </view>
                  <view>{{ item.readCount }}</view>
                </view>
              </view>
            </view>
            <view class="know-img">
              <image
                :src="item.image"
                mode="scaleToFill"
                @error="errorImg(index)"
                lazy-load="false"
              >
              </image>
            </view>
          </view>
        </view>
        <!-- <uni-load-more
          v-if="knowledge.length >= 8"
          :loadingType="loadingType"
        ></uni-load-more> -->
        <modal
          :visible="visible"
          @handlelayerclick="handlelayerclick"
          @submitcallback="submitcallback"
        ></modal>
      </view>
    </view>
  </view>
</template>
<script>
import Swiper from "@/components/swiper/swiper.vue";
import VerticalSwiper from "@/components/swiper/verticalSwiper.vue";
import Product from "@/components/product/productnew.vue";
import InterServer from "@/common/config/server";
import { localStorageSyncServer, getstemInfo } from "@/common/js/common";
import { isLogin } from "@/common/utils/util";
import { API } from "@/common/config/config";
import Vue from "vue";
import { mapState, mapMutations, mapActions, mapGetters } from "vuex";
import uniLoadMore from "@/components/uni-load-more/uni-load-more.vue";
import modal from "@/components/modal/modal.vue";

export default {
  components: {
    Swiper,
    VerticalSwiper,
    Product,
    uniLoadMore,
    modal,
  },
  data() {
    let hostIp = Vue.globalData.hostIp;
    return {
      hostIp,
      imgUrls: [
        //轮播图片
        // "../static/images/home-banner2.jpg",
        // "../static/images/home-banner3.jpg",
        "../static/images/home-banner3.png",
        "../static/images/home-banner5.jpg",
      ],
      arrText: "", //轮播标题
      knowTypeActive: 1001, //知识默认tag
      productList: [], //产品列表
      knowledge: [], //知识列表
      knowType: [
        {
          id: 1001,
          typeName: "全部",
        },
      ], //知识类型
      knowTotalPage: null, //知识：总共页数
      proTotalPage: null, //产品：总共页数
      proPageNum: 0, //产品：第几页
      proPageSize: 3, //产品：每页几条
      knowPageNum: 0, //知识：第几页
      knowPageSize: 10, //知识：每页几条
      loadingType: 0, //加载类型0（loading前），1（loading中），2（没有更多了）
      pageNumber: 0,
      visible: false,
      moduleList: [
        //贷款模块
        {
          img: "../static/images/home_module_1.png",
          moduleText: "银行贷款",
          url: "productCenter",
          id: 1,
        },
        {
          img: "../static/images/home_module_2.png",
          moduleText: "抵押贷款",
          url: "productCenter",
          id: 2,
        },
        {
          img: "../static/images/home_module_3.png",
          moduleText: "信用贷款",
          url: "productCenter",
          id: 3,
        },
        {
          img: "../static/images/home_module_4.png",
          moduleText: "极速贷款",
          url: "productCenter",
          id: 4,
        },
        {
          img: "../static/images/home_module_5.png",
          moduleText: "信用卡",
          url: "productCenter",
          id: 6,
        },
        {
          img: "../static/images/home_module_6.png",
          moduleText: "本地专家",
          url: "localConsultant",
          id: 7,
        },
        {
          img: "../static/images/home_module_7.png",
          moduleText: "平台专家",
          url: "consultant",
          id: 8,
        },
        {
          img: "../static/images/home_module_8.png",
          moduleText: "快捷电话",
          url: "",
          id: 10,
        },
        {
          img: "../static/images/home_module_9.png",
          moduleText: "VIP中心",
          url: "productCenter",
          id: 9,
          typeClick: true,
        },
        {
          img: "../static/images/home_module_10.png",
          moduleText: "期待更多",
          url: "productCenter",
          id: 11,
        },
      ],
    };
  },
  onLoad() {
    this.getKnowType(); //获取知识类别
    this.knowSwiper(); //获取知识轮播
    InterServer.loginTest({}).then((res) => {
      if (res.code != 200) {
        uni.navigateTo({
          url: "./loginnew",
        });
      }
    });
  },

  onShow() {
    this.getKnowList(); //获取知识列表
    this.getLoanAll(); //获取所有贷款信息
    // #ifdef H5
    document.title = `平台`;
    // #endif
    // isLogin().then(() => {});
  },
  onHide() {
    this.proPageNum = 0;
    this.knowPageNum = 0;
    this.productList.length = 0; //产品列表
    this.knowledge.length = 0; //知识列表
  },
  //上拉加载
  onReachBottom() {
    this.knowPageNum = this.knowPageNum + 1;
    if (this.pageNumber + 1 < this.knowTotalPage) {
      this.loadingType = 1;
      this.getKnowList(); //获取顾问列表
    } else {
      this.loadingType = 2;
    }
  },
  methods: {
    errorImg(e) {
      this.knowledge[e].image = "/static/img/newsdefaut.png";
    },
    //获取知识类别
    getKnowType() {
      InterServer.knowType({}).then((res) => {
        if (res.code == 200) this.knowType = this.knowType.concat(res.data);
      });
    },
    //点击取消弹框
    handlelayerclick() {
      this.visible = false;
    },
    //提交回调
    submitcallback() {
      this.visible = false;
    },
    //知识轮播图
    knowSwiper() {
      InterServer.knowSwiper({
        count: 3,
      }).then((res) => {
        if (res.code == 200) {
          this.arrText = res.data;
        }
      });
    },
    //获取知识列表
    getKnowList() {
      InterServer.knowList({
        contentType: "",
        pageNum: this.knowPageNum,
        pageSize: this.knowPageSize,
      }).then((res) => {
        if (res.code == 200)
          for (let item of res.data.dataList) {
            item.image = this.hostIp + item.image;
            this.knowledge.push(item);
          }
        // this.knowledge = this.knowledge.concat(res.data.dataList);
        this.knowTotalPage = res.data.totalPage;
        this.pageNumber = res.data.pageNumber;
      });
    },
    //获取所有贷款信息
    getLoanAll() {
      Vue.showCustomLoading();
      InterServer.getLoanAll({
        pageNum: this.proPageNum,
        pageSize: this.proPageSize,
        loanType: "",
      }).then((res) => {
        uni.hideLoading();
        this.productList = this.productList.concat(res.data.dataList);
        this.proTotalPage = res.data.totalPage;
      });
    },
    //页面跳转
    navigateUrl(e) {
      const dataset = e.currentTarget.dataset;
      const [url, id] = [dataset.url, dataset.id];
      if (id) {
        window.location = `https://zadai.net/alost.html?id=${id}`
        // Vue.customNavigateTo(`${url}?id=${id}`);
      } else {
        Vue.customNavigateTo(`${url}`);
      }
    },
    //快捷电话页面跳转判断
    loginNavigateUrl(e) {
      const dataset = e.currentTarget.dataset;
      const [url, id] = [dataset.url, dataset.id];
      isLogin().then((res) => {
        if (res) {
          Vue.customNavigateTo(`${url}`);
        }
      });
    },
    //底部Tab跳转
    switchTabUrl(e) {
      const typeClick = e.currentTarget.dataset.type || "";
      if (typeClick) {
        return;
      }
      const url = e.currentTarget.dataset.url;
      const id = parseInt(e.currentTarget.dataset.id);
      let _that = this;
      //这里只通过事件改变数据的状态
      if (id > 0 && id <= 6) {
        Vue.customSwitchTab(`./${url}`);
        _that.$store.dispatch("productionUrl", id);
      } else if (id == 9) {
        isLogin().then((res) => {
          if (res) {
            // #ifdef H5
            let Token = localStorageSyncServer.get("Token", 1.8);
            if (Token) {
              window.location.href =
                "http://weijinwang.cn:8008" + `?token=${Token}`;
            } else {
              Vue.customNavigateTo("/pages/login");
            }
            // #endif
            // #ifdef APP-PLUS
            Vue.customNavigateTo(`./webView?link=http://weijinwang.cn:8008`);
            // #endif
          }
        });
      } else if (id == 10) {
        isLogin().then((res) => {
          if (res) {
            _that.visible = true;
          }
        });
      } else {
        if (id) {
          Vue.customNavigateTo(`./${url}?id=${id}`);
        } else {
          Vue.customNavigateTo(`${url}`);
        }
      }
    },
  },
};
</script>

<style lang="less" scoped>
.home-page {
  font-size: 26upx;
  background: #ffffff;

  //  banner图
  .banner {
    width: 100%;
    height: 285upx;
    background: url(../static/images/home-bg.jpeg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: relative;

    .swiper {
      width: 702upx;
      height: 235upx;
      position: absolute;
      left: 50%;
      z-index: 100;
      margin-left: -351upx;
      top: 45upx;
      box-shadow: 0upx 7upx 1upx rgba(153, 153, 153, 0.25);
      border-radius: 20upx;
    }

    &-bg {
      width: 100%;
      height: 148upx;
      background: #ffffff;
      border-top-left-radius: 48upx;
      border-top-right-radius: 48upx;
      position: absolute;
      left: 0;
      bottom: 0;
    }
  }

  // icon列表
  .product {
    &-box {
      padding: 30upx 23upx 23upx;
    }

    &-list {
      padding: 28upx 25upx;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      box-shadow: 0upx 7upx 1upx rgba(153, 153, 153, 0.09);

      .item {
        text-align: center;
        margin-right: 44upx;
        position: relative;

        .icon {
          image {
            width: 48upx;
            height: 48upx;
          }
        }

        .text {
          height: 27upx;
          font-size: 24upx;
          font-family: PingFang-Semibold;
          font-weight: bold;
          line-height: 27upx;
          color: rgba(51, 51, 51, 1);
          margin-top: 6upx;
        }

        &:nth-child(5n) {
          margin-right: 0;
        }

        &:nth-child(1) {
          margin-bottom: 36upx;
        }

        .tips1 {
          position: absolute;
          top: -4upx;
          right: 10upx;
          width: 28upx;
          height: 18upx;
        }

        .tips2 {
          position: absolute;
          top: -4upx;
          right: 12upx;
          width: 21upx;
          height: 24upx;
        }
      }
    }
  }

  .content-module {
    background: #ffffff;
    margin-bottom: 20upx;

    // 平台头条
    .title {
      height: 60upx;
      border-bottom: 1upx solid #ededed;
      font-size: 22upx;
      font-family: PingFang-Semibold;
      font-weight: bold;
      line-height: 42upx;
      box-shadow: 0upx 7upx 1upx rgba(153, 153, 153, 0.09);
      margin: 10upx 24upx 20upx;

      .label {
        width: 130upx;

        .text {
          font-size: 26upx;
        }

        .text-color {
          color: rgba(255, 0, 0, 1);
        }
      }

      &-wiper {
        display: flex;
        align-items: center;

        .vertical-swiper {
          width: 575upx;
          height: 42upx;
        }
      }
    }

    .top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 60upx;
      background: rgba(204, 204, 204, 0.2);
      font-family: PingFang-Semibold;
      color: rgba(102, 102, 102, 1);
      font-size: 24upx;
      padding: 0 8upx;
      margin: 0 24upx 20upx;

      &-title {
        display: flex;
        align-items: center;

        .label {
          width: 4upx;
          height: 22upx;
          background: rgba(51, 51, 51, 1);
          margin-right: 12upx;
        }

        .text {
          font-size: 30upx;
          font-family: PingFang-Semibold;
          font-weight: bold;
          color: rgba(50, 50, 50, 1);
        }
      }
    }

    .product-center {
      margin-bottom: 44upx;
    }

    //咨询中心
    .tab-content-know {
      // padding: 0upx 25upx;
      margin-bottom: 20upx;

      .knowledge-intro {
        padding: 0 24upx;

        .know {
          &-item {
            display: flex;
            box-shadow: 0px 4upx 1upx rgba(153, 153, 153, 0.17);
            padding: 22upx 0;
          }

          &-img {
            border-radius: 10upx;
            margin-right: 12upx;

            image {
              width: 137upx;
              height: 103upx;
              border-radius: 10upx;
            }
          }
        }

        .tips {
          &-text {
            color: #333333;
            line-height: 40upx;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            height: 40upx;
            font-size: 28upx;
            font-family: PingFang-Semibold;
            font-weight: bold;
            line-height: 40upx;
            color: rgba(51, 51, 51, 1);
            width: 470upx;
            border-bottom: 1upx solid rgba(204, 204, 204, 0.5);
            margin: 0 20upx 0 48upx;
          }

          &-title {
            height: 33upx;
            font-size: 24upx;
            font-family: PingFang-Semibold;
            font-weight: bold;
            line-height: 33upx;
            color: rgba(102, 102, 102, 1);
            margin: 7upx 0 9upx;
            padding-left: 45upx;
          }

          &-time {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 115upx 0 45upx;
            height: 30upx;
            font-size: 22upx;
            font-family: PingFang-Semibold;
            font-weight: bold;
            line-height: 30upx;
            color: rgba(102, 102, 102, 1);

            .num {
              display: flex;

              .icon {
                width: 25upx;
                height: 18upx;
                margin-right: 9upx;

                image {
                  width: 25upx;
                  height: 18upx;
                }
              }
            }
          }
        }
      }
    }
  }

  .loding-more {
    height: 90upx;
    line-height: 90upx;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #1b65fa;
    font-size: 26upx;

    image {
      width: 26upx;
      height: 28upx;
      margin-left: 15upx;
    }
  }
}
</style>
